<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>捐助页面</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../bootstrap-4.6.2/css/bootstrap.min.css"/>
    <script src="../jquery/jquery-3.6.0.min.js"></script>
    <script src="../jquery/jquery.cookie.js"></script>
    <script src="../bootstrap-4.6.2/js/bootstrap.min.js"></script>
    <script src="../echarts/echarts.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
   .w{
       width: 1200px;
       margin: 0 auto;
   }
        .title {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .btndiv{
            height: 40px;
            text-align: center;
            margin: 10px 0;
        }
        .tableList{
            text-align: center;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="title">
        <h2>捐赠页面</h2>
    </div>
    <div class="btndiv w">
        <button class="btn  btn-primary" style="float: left" data-toggle="modal" data-target="#exampleModal">捐赠</button>
        <a class="btn btn-primary" style="float: right" href="program.jsp">返回上一页</a>
    </div>
    <div class="w tableList">
        <table class="table table-bordered table-hover">
            <tr>
                <td>事件名称</td>
                <td>捐赠人</td>
                <td>捐赠金额</td>
                <td>捐赠时间</td>
            </tr>

            <tbody id="payList">

            </tbody>
        </table>
    </div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">交纳班费</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="epay2">捐赠金额</label>
                        <input type="number" class="form-control" id="epay2" placeholder="">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" onclick="toPay()" class="btn btn-primary">捐赠</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    getEventPayList();
    function getEventPayList() {
        let eid = $.cookie("eid");
        let sid = $.cookie("sid")
        $.ajax({
            url: "http://localhost:8080/getEventStu",
            type: "POST",
            data: {
                eid: eid,
                sid: sid,
            },
            dataType: "json",
            success: function (json) {
                    $("#payList").empty();
                for (let i = 0; i < json.data.length; i++) {
                    const event = json.data[i];
                    $("#payList").append(
                        " <tr> <td>" +event.e_name+
                        "</td> <td>" +event.s_name+
                        "</td> <td>" +event.pay+
                        "</td> <td>" +event.pdate+
                        "</td> </tr>");
                }
            }
        });
    }
    function toPay() {
        let eid = $.cookie("eid");
        let sid = $.cookie("sid")
       let pay= $("#epay2").val();
        $.ajax({
            url: "http://localhost:8080/toPay",
            type: "POST",
            data: {
                eid: eid,
                sid: sid,
                pay:pay,
            },
            dataType: "json",
            success: function (json) {
                if (json.code==200){
                    alert(json.msg);
                    $('#exampleModal').modal('hide')
                    location.reload();
                }else {
                    alert(json.msg);
                }
            }
        });
    }
</script>
</html>
